<script setup>
import CommonModal from "./CommonModal.vue";
import { getCustomerService } from "@/api/base";
import { onMounted } from "vue";

const emits = defineEmits(["close"]);
const close = () => {
  emits("close");
};

// 获取客服二维码
const csQrcode = ref("");
const getCSQrcode = async () => {
  try {
    const res = await getCustomerService();
    csQrcode.value = res.data?.url || "";
  } catch (err) {
    console.log(err);
  }
};

onMounted(() => {
  getCSQrcode();
});
</script>

<template>
  <CommonModal title="客服微信" :showCancel="false" :showConfirm="false" @close="close">
    <template #content>
      <div class="add-cs">
        <h4>请添加客服微信</h4>
        <div class="qrcode">
          <img src="@/assets/cs-qrcode-img.png" alt="" />
        </div>
      </div>
    </template>
  </CommonModal>
</template>

<style scoped lang="scss">
.add-cs {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 20px;
}
.qrcode {
  border: 1px solid rgba(25, 30, 40, 0.08);
  border-radius: 12px 12px 12px 12px;
  margin-top: 16px;
}
</style>
